<div class="layuimini-main" style="padding-left: 40px">

    <div class="layui-form layui-form-pane">
        <fieldset class="layui-elem-field  layui-field-title">
            <legend>SEO 设置</legend>
        </fieldset>
        <div class="layui-form-item">
            <input type="hidden" name="id" value="{{ $data['info']['id'] }}">
            <label class="layui-form-label required">SEO标题</label>
            <div class="layui-input-block">

                <input type="text" name="title" lay-verify="required" lay-reqtext="Title 不能为空" autocomplete="off" placeholder="SEO title"
                       value="{{ $data['info']['title'] }}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">关键词</label>
            <div class="layui-input-block">
                <input type="text" name="keywords" value="{{ $data['info']['keywords'] }}" lay-verify="required" lay-reqtext="Title 不能为空"
                       autocomplete="off" placeholder="SEO keywords" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">SEO Description</label>
            <div class="layui-input-block">
                <textarea name="description" class="layui-textarea" placeholder="SEO Description 长度不超过200个字符">{{ $data['info']['description'] }}</textarea>
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title">
            <legend>产品信息设置</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label">新闻分类</label>
            <div class="layui-input-block">
                <label>
                    <select name="news_type">
                        <option value="2">新闻</option>
                        @foreach($data['categories'] as $v)
                            @if($data['info']['news_type'] == $v->id)
                                <option value="{{ $v->id }}" selected>{{ $v->name }}</option>
                            @else
                                <option value="{{ $v->id }}">{{ $v->name }}</option>
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新闻标题</label>
            <div class="layui-input-block">
                <input type="text" name="news_title" lay-verify="required" lay-reqtext="新闻标题不能为空"
                       value="{{ $data['info']['news_title'] }}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">新闻摘要</label>
            <div class="layui-input-block">
                <textarea name="abstract" class="layui-textarea" placeholder="摘要长度不超过200个字符">{{ $data['info']['abstract'] }}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新闻缩略图</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="img">上传图片</button>
                    <input type="text" disabled="disabled" name="img"  value="{{ $data['info']['img'] }}"
                           style="float: left; width: 50%;" autocomplete="off" class="layui-input" placeholder="尺寸370 * 220">
                </div>
            </div>
            <div class="layui-upload-list" >
                <img class="layui-upload-img" id="upload_img_demo" src="{{ $data['info']['img'] }}" style="border: 1px solid #cccccc">
                <p id="demo_text"></p>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <textarea name="content" id="content" cols="30" rows="10">{!! $data['info']['content'] !!}</textarea>
                <script src="{{ asset('/admin/lib/tinymce/tinymce.min.js') }}"></script>
                <script>
                    tinymce.init({
                        selector:'#content',
                        language:'zh_CN',
                        max_height:800,
                        plugins: 'print preview searchreplace autolink directionality visualchars fullscreen image link media template code table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern paste emoticons  autoresize',
                        toolbar: 'code forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright indent2em lineheight | \
                    bullist numlist | blockquote subscript superscript removeformat | \
                    table image media  emoticons charmap hr pagebreak insertdatetime | fullscreen ',
                        menubar:false,
                        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
                        autosave_ask_before_unload: false,
                        toolbar_drawer : false,
                        // 图片上传
                        images_upload_handler: function (blobInfo, success, failure) {
                            var xhr, formData;
                            xhr = new XMLHttpRequest();
                            xhr.withCredentials = false;
                            xhr.open('POST', '{{route("image.editor")}}');
                            var token = '{{ csrf_token() }}';
                            xhr.setRequestHeader("X-CSRF-Token", token);
                            xhr.onload = function() {
                                var json;
                                if (xhr.status != 200) {
                                    failure('HTTP Error: ' + xhr.status);
                                    return;
                                }
                                json = JSON.parse(xhr.responseText);

                                if (!json || typeof json.location != 'string') {
                                    failure('Invalid JSON: ' + xhr.responseText);
                                    return;
                                }
                                success(json.location);
                            };
                            formData = new FormData();
                            formData.append('file', blobInfo.blob(), blobInfo.filename());
                            xhr.send(formData);
                        },
                    })
                </script>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'iconPickerFa','upload','miniUpload'], function () {
        var form = layui.form,
            layer = layui.layer,
            miniUpload = layui.miniUpload,
            $ = layui.$;
        var miniPage = layui.miniPage;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();
        // 上传缩略图
        miniUpload.uploadImg('img', 'upload_img_demo');
        //多图片上传
        miniUpload.uploadImg('banner', 'slider_show');
        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            data.field.content = tinymce.get('content').getContent();
            layer.load(2);
            $.ajax({
                url: 'news/' + data.field.id,
                method: 'PUT',
                data: data.field,
                success: function (res) {
                    layer.closeAll('loading');
                    if (res.code === 0) {
                        layer.msg('保存成功', {icon: 1, time: 2000}, function () {
                            layer.close(parentIndex);
                            // 刷新列表
                            var options = {};
                            options.homeInfo = options.homeInfo || {};
                            miniPage.refresh(options);
                        })
                    } else {
                        layer.msg(res.msg, {icon: 5})
                    }
                },
                error: function (res) {
                    layer.msg('请求错误', {icon: 5})
                }
            });
            return false;
        });

    });
</script>
